<script setup lang="ts">
import { onMounted, getCurrentInstance, watchEffect } from 'vue'
import * as echarts from 'echarts'

const that = getCurrentInstance();

const packData = [200, 260, 240, 240, 240, 240, 240, 240]

const drawEcharts = () => {
    var myChart = echarts.init(that?.refs.chart)
    // var option = {
    //     title: {
    //         text: '缴库情况',
    //         x: '5%',
    //         textStyle: {
    //             color: '#c0daff',
    //             fontSize: 18,
    //             lineHeight: 30,
    //         },
    //         backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
    //             offset: 0,
    //             color: '#304ea6ff'
    //         }, {
    //             offset: 1,
    //             color: '#304ea600'
    //         }]),
    //         padding: [0, 300, 0, 20]
    //     },
    //     legend: {
    //         data: ['目标', '实际'],
    //         textStyle: {
    //             color: 'c0daff',
    //             fontSize: 18
    //         }
    //     },
    //     grid: {
    //         height: '78%'
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
    //         axisLabel: {
    //             color: '#edffff',
    //             fontSize: 14
    //         }
    //     },
    //     yAxis: {
    //         splitLine: {
    //             show: false,
    //         },
    //         axisLabel: {
    //             color: '#edffff',
    //             fontSize: 14
    //         }
    //     },
    //     series: [
    //         {
    //             name: '目标',
    //             type: 'bar',
    //             label: {
    //                 show: true,
    //                 position: 'top',
    //                 fontSize: 18,
    //                 color: '#ebffff'
    //             },
    //             z: -1,
    //             data: new Array(9).fill(240),
    //             color: '#5470c6'
    //         },
    //         {
    //             name: '实际',
    //             type: 'bar',
    //             label: {
    //                 show: true,
    //                 position: 'top',
    //                 fontSize: 12,
    //                 formatter: function (data: { value: number }) {
    //                     if (data.value < 240) return `{red|${data.value}\n(${Math.floor(data.value / 2.4)}%)}`
    //                     if (data.value > 240) return `{green|${data.value}\n(${Math.floor(data.value / 2.4)}%)}`
    //                     return `{black|${data.value}\n(${Math.floor(data.value / 2.4)}%)}`
    //                 },
    //                 rich: {
    //                     red: {
    //                         color: '#f00',
    //                         fontSize: 18
    //                     },
    //                     green: {
    //                         color: '#0f0',
    //                         fontSize: 18
    //                     },
    //                     black: {
    //                         color: '#ebffff',
    //                         fontSize: 18
    //                     },
    //                 },
    //             },
    //             data: packData,
    //             color: '#91cc75'
    //         },
    //     ],
    // }

    var option = {
        title: {
            text: '缴库情况',
            x: '18px',
            textStyle: {
                color: '#c0daff',
                fontSize: 18,
                lineHeight: 30,
            },
            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#304ea6ff'
            }, {
                offset: 1,
                color: '#304ea600'
            }]),
            padding: [0, 300, 0, 20]
        },
        tooltip: {
            trigger: 'item',
            formatter: function (value: object) {
                return `${value.seriesName}: ${value.data.value}`;
            }
        },
        legend: {
            data: []
        },
        grid: {
            left: 0
        },
        radar: {
            indicator: [
                { name: '8', max: 240 },
                { name: '9', max: 240 },
                { name: '10', max: 240 },
                { name: '11', max: 240 },
                { name: '13', max: 240 },
                { name: '14', max: 240 },
                { name: '15', max: 240 },
                { name: '16', max: 240 },
            ]
        },
        series: [
            {
                name: '缴库情况',
                type: 'radar',
                data: [
                    {
                        value: [192, 251, 240, 240, 240, 240, 240, 240],
                        name: '已缴'
                    },
                ]
            }
        ]
    }
    myChart.setOption(option);
}

onMounted(() => {
    drawEcharts();
})
</script>

<template>
    <div ref="main" style="width: 30%; height: 95%; position: relative; top: 10px;">
        <div ref="chart" style="width: 50%; height: 100%; display: inline-block;"></div>
        <div ref="desc" style="width: 50%; height: 100%; display: inline-block;">
            <table>
                <tbody style="color:#ebffff; font-size: 20px;">
                    <tr>
                        <td>08:00-09:00:</td>
                        <td style="color: red;">-40 &nbsp&nbsp</td>
                        <td>09:00-10:00:</td>
                        <td style="color: green;">20</td>
                    </tr>
                    <tr>
                        <td>10:00-11:00:</td>
                        <td style="color: green;">达成 &nbsp&nbsp</td>
                        <td>11:00-12:00:</td>
                        <td style="color: green;">达成</td>
                    </tr>
                    <tr>
                        <td>13:00-14:00:</td>
                        <td style="color: green;">达成 &nbsp&nbsp</td>
                        <td>14:00-15:00:</td>
                        <td style="color: green;">达成</td>
                    </tr>
                    <tr>
                        <td>15:00-16:00:</td>
                        <td style="color: green;">达成 &nbsp&nbsp</td>
                        <td>16:00-17:00:</td>
                        <td style="color: green;">达成</td>
                    </tr>
                    <tr>
                        <td style="text-align: right;">当前总计:</td>
                        <td style="color: red;">-20 &nbsp&nbsp</td>
                        <td></td>
                        <td style="color: green;"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<style scoped></style>
